﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>

    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>新建网站角色 - 管理员管理 - H-ui.admin v3.0</title>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<article class="cl pd-20" id="div-vue">
    <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
        <div class="formControls col-xs-8 col-sm-9">
            <input type="text" class="input-text" value="" placeholder="" id="roleName" name="roleName"
                   datatype="*4-16" nullmsg="用户账户不能为空" v-model="roleName">
        </div>
    </div>
    </br>
    <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">描述：</label>
        <div class="formControls col-xs-8 col-sm-9">
            <input type="text" class="input-text" value="" placeholder="" id="description" name=""
                   v-model="description">
        </div>
    </div>
    </br>
    <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">网站角色：</label>
        <div class="formControls col-xs-8 col-sm-9">
            <dl class="permission-list">
                <dt>
                    <label>
                        资讯管理</label>
                </dt>
                <dd>
                    <dl class="cl permission-list2">
                        <dd>
                            <label class="">
                                <input type="checkbox" value="1"
                                       v-model="checkBox"
                                >
                                添加</label>
                            <label class="">
                                <input type="checkbox" value="2"
                                       v-model="checkBox"
                                >
                                修改</label>
                            <label class="">
                                <input type="checkbox" value="3"
                                       v-model="checkBox"
                                >
                                删除</label>
                            <label class="">
                                <input type="checkbox" value="4"
                                       v-model="checkBox"
                                >
                                查看</label>
                            <label class="">
                                <input type="checkbox" value="5"
                                       v-model="checkBox"
                                >
                                审核</label>
                        </dd>
                    </dl>
                </dd>
            </dl>
            <dl class="permission-list">
                <dt>
                    <label>
                        用户中心</label>
                </dt>
                <dd>
                    <dl class="cl permission-list2">
                        <dd>
                            <label class="">
                                <input type="checkbox" value="6"
                                       v-model="checkBox"
                                >
                                添加</label>
                            <label class="">
                                <input type="checkbox" value="7"
                                       v-model="checkBox"
                                >
                                修改</label>
                            <label class="">
                                <input type="checkbox" value="8"
                                       v-model="checkBox"
                                >
                                删除</label>
                            <label class="">
                                <input type="checkbox" value="9"
                                       v-model="checkBox"
                                >
                                查看</label>
                            <label class="">
                                <input type="checkbox" value="10"
                                       v-model="checkBox"
                                >
                                审核</label>
                        </dd>
                    </dl>
                </dd>
            </dl>
        </div>
    </div>
    <div class="row cl">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
            <button @click="addRole()" class="btn btn-success radius" id="admin-role-save" name="admin-role-save"><i
                    class="icon-ok"></i> 确定
            </button>
        </div>
    </div>
    {{checkBox}}
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>

<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    let vue = new Vue({
        el: '#div-vue',
        data: {
            roleName: "",          //角色名称
            roleId: "",             //角色id
            description: "",        //描述
            permissionId: [],      //权限id

            list: [],           //所有数据集合
            checkBox: [],        //复选框选择
        },
        methods: {
            //添加角色
            addRole() {
                let thisObj = this;
                console.log("this.roleId: " + this.roleId)
                if (this.roleId == null) {
                    let url = "/roleManager/addRoleMessage.do";
                    let params = {roleName: this.roleName, description: this.description, permissionId: this.checkBox};
                    postWithJson(url, params, function (data) {
                        if (data == 1) {
                            window.location.reload();
                            alert("添加成功");
                        } else {
                            alert("添加失败");
                        }
                    });

                } else {
                    let url = "/roleManager/updateRolePermissionByIdMassage.do";
                    let params = {
                        roleId: this.roleId,
                        roleName: this.roleName,
                        description: this.description,
                        permissionId: this.checkBox
                    };
                    postWithJson(url, params, function (data) {
                        if (data == 1) {
                            alert("修改成功");
                        } else {
                            alert("修改失败");
                        }
                    });
                }

            },
            //编辑角色
            admin_role_edit(id) {
                this.roleId = id;
                if (id == null) {
                    return;
                }
                let thisObj = this;
                let url = "/roleManager/showRoleByIdMessage.do";
                postWithJson(url, id, function (data) {
                    console.log("data: " + data)
                    let roleName = data.roleName;
                    let description = data.description;
                    let permissionId = data.permissionId;
                    thisObj.checkBox = permissionId;
                    thisObj.roleName = roleName;
                    thisObj.description = description;
                })
            },
        },
        mounted: function () {
            let id = null;
            if (getUrlParam("id") != null) {
                id = getUrlParam("id");
            }
            this.admin_role_edit(id);
        }
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>